﻿<script type="text/javascript">

	$(function ()
	{
		var menuStatus;

		$("a.showMenu").click(function ()
		{
			if (menuStatus != true)
			{
				return showMenu();
			}
			else
			{
				return closeMenu();
			}
		});

		$("#menu-overlay").click(function ()
		{
			closeMenu();
		});

		//		$('.pages').live("swiperight", function ()
		//		{
		//			if (!menuStatus)
		//			{
		//				$(".ui-page-active").animate({ marginLeft: "65%" }, 300, function () { menuStatus = true; $("#menu").css("z-index", "1"); });
		//			}
		//		});

		//		$('.pages').live("swipeleft", function ()
		//		{
		//			if (menuStatus)
		//			{
		//				$("#menu").css("z-index", "-999");
		//				$(".ui-page-active").animate({ marginLeft: "0" }, 300, function () { menuStatus = false; });
		//			}
		//		});
	});

	function closeMenu()
	{
		//$("#menu").css("z-index", "-999").hide();
		$("#menu").hide();
		//$("#page").animate({ marginLeft: "0" }, 300, function () { menuStatus = false; });
		//$("#menu").animate({ width: "0%" }, 300, function () { menuStatus = false; $("#menu-overlay").hide(); });
		$("#menu").css("width", "0");
		$("#menu-overlay").hide();
		return false;
	}

	function showMenu()
	{
		//$("#menu").css("z-index", "2");
		$("#menu-overlay").show();
		$("#menu").show();
		//$("#page").animate({ marginLeft: "65%" }, 300, function () { menuStatus = true; $("#menu").css("z-index", "1"); });
		$("#menu").animate({ width: "65%" }, 300, function () { menuStatus = true;  });
		
		return false;
	}
	
</script>


<div id="menu" style="position: fixed; top: 0; left: 0; width: 0%; z-index: 2; height: 100%; display: none;" >
	@Html.Partial("MobileMenuItems")	
</div>

<div id="menu-overlay" style="display: none; width: 100%; height: 100%; z-index:1; position: fixed;">

</div>